<template>
	<div v-loading="loading"
    element-loading-text="生成需要30s-5min，请耐心等待！"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="wrap">
			<div class="container">
				<div class="step">
					<router-link to="/holdall"><span class="active">工具箱</span></router-link>
					&nbsp;<span>/</span>&nbsp;
					<router-link to="/select_author"><span>诗词起名</span></router-link>
				</div>
				<div class="head-title">
					<span></span>
					<h3>3.诗词起名</h3>
					<span></span>
				</div>
				
				<div class="c-center-box box">
					<div class="title a" id="recom-jump">
						<div class="title1">
							<span class="circle"></span>
							基础信息
						</div>
						<span class="tips">以 {{nameParams.zuozhe}} 诗词《{{nameParams.mingcheng}}》为题的诗词起名</span>
					</div>
					<!--  style="max-width: 600px;margin: auto;" -->
					<div>
						<el-row>
							<el-form :model="ruleForm" class="userSignForm demo-ruleForm" ref="ruleForm" :rules="rules" :label-width="lWidth" :label-position="labelPosition">
								<el-row :gutter="20">
									<el-col :span="24" :md="12">
										<el-form-item label="姓" prop="firstName" required>
											<el-input class="len input w-100" placeholder="请输入姓" v-model.trim="ruleForm.firstName" type="text" autocomplete="off"></el-input>
										</el-form-item>
										<el-form-item prop="bornArea" label="出生地区">
										    <el-select
										        style="width:125px;margin-right:10px;"
										        class="countrys"
										        placeholder="请选择国家"
												
										        v-model="ruleForm.countryId"
										        @change="selectCountryChange"
										    >
										        <el-option
										            v-for="item in countryList"
										            :key="item.id"
										            :label="item.countryRegion"
										            :value="item.id"
										        >
										        </el-option>
										    </el-select>
										    <el-select
										        style="width:125px;margin-right:10px;"
										        class="countrys"
										        placeholder="请选择省份"
										        v-model="ruleForm.provinceId"
												
										        v-if="!isForeign"
										        @change="selectProvinceChange"
										    >
										        <el-option
										            v-for="item in provinceList"
										            :key="item.id"
										            :label="item.countryRegion"
										            :value="item.id"
										        >
										        </el-option>
										    </el-select>
										    <el-select
										        style="width:125px;margin-right:10px;"
										        class="countrys"
										        placeholder="请选择城市"
												
										        v-model="ruleForm.cityId"
										        v-if="!isForeign"
										        @change="selectCityChange"
										    >
										        <el-option
										            v-for="item in cityList"
										            :key="item.id"
										            :label="item.countryRegion"
										            :value="item.id"
										        >
										        </el-option>
										    </el-select>
										</el-form-item>
										<el-form-item label="性别" prop="sex">
										    <el-checkbox-group v-model="ruleForm.sex" :max="1"> 
										      <el-checkbox :label="item.label" name="sex" v-for="(item,index) in sexArr" :key="index"></el-checkbox>
										    </el-checkbox-group>
										  </el-form-item>
									</el-col>
									<el-col :span="24" :md="12">
										<el-form-item prop="datas" label="出生日期">
										    <el-select
										        placeholder="请选择"
												style="margin-right:10px;"
												
										        class="w-100 w-202"
										        v-model="ruleForm.timeType"
										    >
										        <el-option
										            v-for="item in timeType"
										            :key="item.value"
										            :label="item.label"
										            :value="item.value"
										        >
										        </el-option>
										    </el-select>
										    <el-date-picker
												class="len w-100 w-202"
										        type="datetime"
										        format="yyyy-MM-dd HH:mm"
										        placeholder="选择日期时间"
												:editable="false"
										        v-model="ruleForm.birthday"
										        @change="dateChange"
										        value-format="yyyy-MM-dd HH:mm:ss"
										    >
										    </el-date-picker>
										</el-form-item>
										<el-form-item v-if="!this.$store.state.isIos">
										    <el-input
										        style="margin-right:10px;"
										        class="len w-100 w-202"
										        type="text"
										        disabled
										        placeholder="选择日期时间"
										        autocomplete="off"
										        v-model="disabledTimeType"
										    >
										    </el-input>
										    <el-input
										        class="len w-100 w-202"
										        type="text"
										        disabled
										        placeholder="选择日期时间"
										        autocomplete="off"
										        v-model="ruleForm.anotherDate"
										    >
										        <i
										            slot="prefix"
										            class="el-input__icon el-icon-time"
										        ></i
										    ></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row class="caozuo">
									<el-col :span="24" style="border-top: 1px solid #D4D9EE;">
										<p>请勾选以下诗词中允许用于取名的文字<span @click="selectAll">全选</span><span @click="clear">清空</span> </p>
									</el-col>
									<el-col :span="24">
										<el-form-item prop="words">
											<el-checkbox-group v-model="ruleForm.words">
											  <el-checkbox :label="item" name="sex" v-for="(item,index) in dynaArr" :key="index" v-if="index<showIndex"></el-checkbox>
											</el-checkbox-group>
											<div style="width: 100%;text-align: center;" v-if="dynaArr.length>showT"><el-button type="text" @click="unfold">{{btnTitle}}</el-button></div>
										</el-form-item>
									</el-col>
								</el-row>
								
								<el-form-item>
									<div class="b">
										<div class="sumbit-btn" @click="submitForm">
											生成名字
										</div>
										<vip-count></vip-count>
									</div>
								</el-form-item>
							</el-form>
						</el-row>
					</div>
				</div>
				
				<tips></tips>
				
				
				<div class="c-bottom-box box">
					<div class="title" id="recom-jump">
						<span class="circle"></span>
						诗词起名已生成的{{formatRecomTotal}}个美名
					</div>
					<el-row>
						<el-col :xl="6" :lg="6" :md="8" :sm="8" :xs="12" class="item-box" v-for="(item, index) in recomName" :key="index">
							<div class="item" @click="
                                        toNameDetail(
                                            item.firstName,
                                            item.lastName,
                                            item.score,
                                            item.heartIcon
                                        )
                                    ">
								<div :class="['heart-icon-ren',{'no-heart-icon':!item.heartIcon},{'heart-icon':item.heartIcon}]" @click.stop="check(item)"></div>
								<span class="name"><span class="xing">{{ item.firstName }}</span>{{ item.lastName }} <span class="score">{{item.score}}<span
										 style="font-size: 14px;">分</span></span> </span>
								<span class="detail">{{item.wx}}
								</span>
							</div>
						</el-col>
					</el-row>
					<div class="page-box">
						<el-pagination background layout="prev, pager, next" :total="recomTotal" :page-size="pageSize" @current-change="pageChange"
						 :pager-count="5">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<GoTop></GoTop>
	</div>
</template>

<script>
	import banner from "@/assets/images/classicName/banner2.png"
	import calendar from "../sign/lib/timer.js";
	import GoTop from "../../components/goTop";
	export default {
		components:{
			GoTop
		},
		data() {
			var firstName = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入姓!'));
				}
				if ((value != '' && value.length != 1) || !/^[\u4e00-\u9fa5]+$/.test(value)) {
					callback(new Error('只能输入1个汉字!'));
				} else {
					callback();
				}
			};
			var sex = (rule, value, callback) => {
				console.log(value)
				if(value === ''){
					callback(new Error('请选择性别!'));
				}else{
					callback();
				}
			};
			
			var fix = (rule, value, callback) => {
				if ((value == '' && value.length >= 1) || (value != '' & !/^[\u4e00-\u9fa5]+$/.test(value))) {
					callback(new Error('只能输入1个汉字!'));
				} else {
					callback();
				}
			}
			
			return {
				loading:false,
				ruleForm: {
					words:[],
					firstName: '', // 姓氏
					sex: [], // 0-女，1-男，3-未知,
					count: "3", // 名字字符个数
					wuxing:[],//第二个字五行限定
					wuxing1:[],//第三个字五行限定["金","木","金"]
					fix: '', // 姓名中的某个固定的字
					countryId: 1, // 国家id
					cityId: 1, // 城市id
					provinceId: 1, // 省份id
					fixLocal: '0', // 固定字的位置，0-没有要求，1-固定中间，2-固定最后
					timeType: 1, // 1-公历，0-农历
					anotherDate: '', // 另一个日期
					birthday:""//出生日期
				},
				isForeign:false,
				sexArr:[
					{
						label:"男",
						value:"1"
					},
					{
						label:"女",
						value:"0"
					},
					{
						label:"未知",
						value:"3"
					}
				],
				// 国家列表
				countryList: [],
				// 省份列表
				provinceList: [],
				// 城市列表
				cityList: [],
				timeType: [{
						value: 1,
						label: "公历"
					},
					{
						value: 0,
						label: "农历"
					},
				],
				recomName: [], // 推荐的姓名列表
				nameInfo: '', // 分析姓名相关的信息
				pageSize: 100,
				pageIndex: 1,
				lWidth:"4em",
				dynaArr:[],
				labelPosition:'',
				recomTotal: 0, // 总共有多少个推荐的姓名
				nameParams: {}, // 姓名的详细信息
				fliter: [
					"木",
					"火",
					"土",
					"金",
					"水"
				],
				rules: {
					firstName: [{
						validator: firstName,
						trigger: 'blur'
					}, ],
					birthday: [
					    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
					],
					fix: [{
						message: '请输入固定字',
						trigger: 'blur'
					}, ],
					sex:[
						{ type: 'array', required: true, message: '请选择性别', trigger: 'change' }
					],
					words:[
						{ type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
					]
				},
				unfoldShow:false,
				showIndex:1000000000000,
				showT:90
			}
		},
		created() {
			let select_detail_info = localStorage.getItem("select_detail_info");
			let nameParams = JSON.parse(localStorage.getItem("nameParams"));
			if (select_detail_info) {
				localStorage.removeItem("select_detail_info");
				select_detail_info = JSON.parse(select_detail_info)
				this.ruleForm = select_detail_info;
			}
			if("{}" == JSON.stringify(this.$route.query)){
				this.nameParams = nameParams;
			}else{
				this.nameParams = this.$route.query;
			}
			
			// this.getNameInfo();
			let dynaArr=this.unique(this.ClearBr(this.stripscript(this.nameParams.yuanwen)).split(""))
			
			let arrL=parseInt(dynaArr.length*0.3)
		
			this.dynaArr=dynaArr
			
			let arr=this.getRandNumForRange(0,dynaArr.length,arrL)
			for(var i in arr){
				this.ruleForm.words.push(dynaArr[arr[i]])
			}
			
			this.getCountryList();
		},
		mounted() {
			let w=document.body.clientWidth
			console.log(this.dynaArr.length)
			if(w<450){
				this.labelPosition="top"
				this.labelPosition="top"
				this.lWidth="4em"
				this.showIndex=30
				this.showT=30
				if(this.dynaArr.length>this.showIndex){
					this.unfoldShow=true
				}else{
					this.unfoldShow=false
				}
			}else{
				this.showIndex=90
				this.showT=90
				this.labelPosition="right"
				this.labelPosition="right"
				this.lWidth="100px"
				if(this.dynaArr.length>this.showIndex){
					this.unfoldShow=true
				}else{
					this.unfoldShow=false
				}
			}
			const that = this
			window.onresize = () => {
			  return (() => {
				window.screenWidth = document.body.clientWidth
				w = window.screenWidth
				if(w<450){
					this.labelPosition="top"
					this.labelPosition="top"
					this.lWidth="4em"
					this.showIndex=30
					this.showT=30
					if(this.dynaArr.length>this.showIndex){
						this.unfoldShow=true
					}else{
						this.unfoldShow=false
					}
					// this.getNameInfo();
				}else{
					this.labelPosition="right"
					this.labelPosition="right"
					this.lWidth="100px"
					this.showIndex=90
					this.showT=90
					if(this.dynaArr.length>this.showIndex){
						this.unfoldShow=true
					}else{
						this.unfoldShow=false
					}
					// this.getNameInfo();
				}
			  })()
			}
			window.scroll(0,0)
		},
		computed: {
			btnTitle(){
				if(this.unfoldShow){
					return "显示全部"
				}else{
					return "收起"
				}
			},
			computeSex() {
				if (this.nameParams.sex == 1) return '男';
				else if (this.nameParams.sex == 0) return '女';
				else return '未知';
			},
			// 根据推荐的姓名个数，显示不同的格式如2000+，3000+
			formatRecomTotal() {
				if (this.recomTotal <= 1000) return this.recomTotal;
				return parseInt(this.recomTotal / 1000) * 1000 + '+';
			},
			disabledTimeType() {
				if (this.ruleForm.timeType == 1) return '农历';
				else return '公历';
			},
			nongli() {
				let nows = new Date(this.ruleForm.bornTime);
				let Y = nows.getFullYear() + '-';
				let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
				let Ys = nows.getFullYear();
				let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
				let D = nows.getDate();
				let h = nows.getHours();
				let m = nows.getMinutes();
				let s = nows.getSeconds();
				let timers = Y + M + D;
				var timer = this.getLunarDate(timers);
		
				// var nongli = this.toSolar(Y,M,D)
				if (this.ruleForm.datas == 1) {
					//return "农历  " +  timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay+" "+h+":"+m+":"+s;
					return "农历  ";
				} else {
					var aaa = calendar.lunar2solar(Ys, Ms, D);
					//return "公历  " + aaa.cYear + '-'+ aaa.cMonth + '-' + aaa.cDay+" "+h+":"+m+":"+s;
					return "公历  ";
					// return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
				}
		
			},
			gongli() {
				let nows = new Date(this.ruleForm.birthday);
				let Y = nows.getFullYear() + '-';
				let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
				let Ys = nows.getFullYear();
				let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
				let D = nows.getDate();
				let h = nows.getHours();
				let m = nows.getMinutes();
				let s = nows.getSeconds();
				let timers = Y + M + D;
				return ''
			},
			texts() {
				if (this.ruleForm.datas == 1) {
					return "公历/农历"
				} else {
					return "农历/公历"
				}
			},
			isReverse() {
				if (this.ruleForm.datas == 1) {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			//点击收藏
			check(val){
				this.$ajax.post(val.heartIcon?'/util/unCollectName':'/util/collectName',{
					"xing":val.firstName,
					"ming":val.lastName
				}).then(res=>{
					if(res.data.code==0){
						this.$message({
							message: val.heartIcon?'收藏成功':'收藏取消',
							type: 'success'
						});
					}else {
						this.$message.error(res.data.msg);
					}
				});
				//val.heartIcon=!val.heartIcon;
				this.$set(val,'heartIcon',!val.heartIcon)
				//console.log(val);
			},
			getRandNumForRange(least, max, num) {
			    // 检查传值是否合法
			    if(num > max - least) return false;
			    // 产生指定范围的所有数值
			    var numList = [], numRandList = [], randId;
			    for (var i = least; i < max; i++) numList.push(i);
			    // 产生记录次数
			    for (var i = 0; i < num; i++) {
			        randId = Math.floor(Math.random() * numList.length);    // 随机一个数组ID
			        numRandList.push(numList[randId]);  // 获取这个值
			        numList.splice(randId, 1);  // 删除这个成员 防止下次再次生成
			    }
			    return numRandList;
			},
			// 展开全部
			unfold(){
				let w=document.body.clientWidth
				this.unfoldShow=!this.unfoldShow
				if(!this.unfoldShow){
					this.showIndex=100000000000
				}else{
					if(w<450){
						this.showIndex=30
					}else{
						this.showIndex=90
					}
				}
			},
			unique (arr) {
			  return Array.from(new Set(arr))
			},
			selectAll(){
				this.ruleForm.words=this.dynaArr
			},
			clear(){
				this.ruleForm.words=[]
			},
			//去除换行 
			ClearBr(key) { 
				key = key.replace(/<\/?.+?>/g,""); 
				key = key.replace(/[\r\n]/g, ""); 
				return key; 
			},
			// 清除特殊字符
			// stripscript(s){ 
			// 	var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？] 「 」《 》") 
			// 	var rs = ""; 
			// 	for (var i = 0; i < s.length; i++) { 
			// 	rs = rs+s.substr(i, 1).replace(pattern, ''); 
			// 	} 
			// 	return rs; 
			// },
			stripscript(e){
				//替换字符串中的所有特殊字符（包含空格）
				if(e != ""){
					const pattern=/[`「」《》~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
					return e.replace(pattern,"");
				}
			},
			// 生成随机字符串
			randomString(len) {
				len = len || 32;
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			// 用于转换数组
			tt(e) {
				if (e[0] == "不限定") {
					return ["金", "木", "水", "火", "土"]
				} else {
					return e
				}
			},
			// 推荐姓名
			choicenessName() {
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					sex: this.nameParams.sex, // 0-女，1-男
					xing: this.nameParams.firstName,
					count: this.nameParams.count,
					fix: this.nameParams.fix,
					fixLocal: this.nameParams.fixLocal,
					wuxing2: this.tt(this.nameParams.wuxing)
				}
				if (this.nameParams.count == 3) {
					data = {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						sex: this.nameParams.sex, // 0-女，1-男
						xing: this.nameParams.firstName,
						count: this.nameParams.count,
						fix: this.nameParams.fix,
						fixLocal: this.nameParams.fixLocal,
						wuxing2: this.tt(this.nameParams.wuxing),
						wuxing3: this.tt(this.nameParams.wuxing1)
					}
				}
				this.$ajax
					.post("/util/wuXingDic", data)
					.then(res => {
						if (res.data.code == 0) {
							// 调到推荐姓名盒子的顶部
							//if(this.pageIndex >= 2) location.href = location.href + "#recom-jump";
							this.recomName = res.data.data.list;
							this.recomTotal = res.data.data.total;
							for(let i=0; i<this.recomName.length; i++){
								//this.recomName[i].heartIcon=true;
								this.$set(this.recomName[i],'heartIcon',true)
							};
						} else {
							this.$message.error(res.data.msg)
						};
					});
			},
			// 姓名相关分析
			getNameInfo() {
				this.$ajax.post("/util/takeName", {
						birthday: this.nameParams.birthday,
						sex: this.nameParams.sex, // 0-女，1-男
					})
					.then(res => {
						if (res.data.code == 0) {
							this.nameInfo = res.data.data;
						} else {
							this.$message.error(res.data.msg)
						};
					});
			},
			// 用户点击推荐姓名的分页
			pageChange(page) {
				this.pageIndex = page;
				this.submitForm()
			},
			// 查看推荐的姓名详情
			toNameDetail(firstName, lastName, score,heartIcon) {
				let link = this.$router.resolve({
					path: '/name_analysis',
					query: {
						firstName: firstName,
						lastName: lastName,
						score: score,
						heartIcon:heartIcon
					}
				});
				window.open(link.href, '_blank');
			},
			select(){
				this.ruleForm.fixLocal="0"
			},
			// 提交表单
			submitForm(formName) {
				
				
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						if (this.ruleForm.timeType == 0) {
						    [this.ruleForm.birthday, this.ruleForm.anotherDate] = [this.ruleForm.anotherDate, this.ruleForm.birthday]
						}
						if (this.ruleForm.birthday == '') {
						    return this.$message.error('请填写出生日期');
						}
						// 如果没有登录，跳转登录
						if (!localStorage.getItem("key")) {
							this.$confirm('您需要登录后才能查询，是否登录后再返回此页？页面信息会保留', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							}).then(() => {
								// 保存本地信息
								localStorage.setItem("select_detail_info", JSON.stringify(this.ruleForm));
								localStorage.setItem("nameParams", JSON.stringify(this.nameParams));
								this.$router.push({
									path: "/userlogin",
									query: {
										poetry_path: '/select_detail'
									}
								})
							})
							return;
						}
						if(this.$store.state.count==0 && this.$store.state.show!=true){
							this.$confirm('您的本月免费次数已用完，请升级会员享受无限次数查询！', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							}).then(() => {
								// 保存本地信息
								this.$router.push({
									path: "/vip_pay"
								})
							})
							return;
						}
						this.loading=true
						this.$ajax.post("/util/articleTakeName", {
								pageIndex:this.pageIndex,
								pageSize:this.pageSize,
								words: this.ruleForm.words,
								firstName: this.ruleForm.firstName
							})
							.then(res => {
								localStorage.removeItem('nameParams')
								if (res.data.code == 0) {
									setTimeout(()=>{
										this.recomName = res.data.data.names;
										this.recomTotal=res.data.data.total
										this.loading=false
									},10000)
								} else {
									this.$message.error(res.data.msg)
									this.loading=false
								};
								
							});
						// this.$router.push({
						// 	name: 'wuxing_name',
						// 	query: this.ruleForm
						// });
					} else {
						return false;
					}
				});
			},
			// 选择日期
			dateChange(val) {
				if(this.$store.state.isIos){
					return
				}
				let nows = new Date(this.ruleForm.birthday);
				let Y = nows.getFullYear() + '-';
				let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
				let Ys = nows.getFullYear();
				let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
				let D = nows.getDate();
				let h = nows.getHours();
				let m = nows.getMinutes();
				let s = nows.getSeconds();
				let timers = Y + M + D;
				var timer = this.getLunarDate(timers);
				// var nongli = this.toSolar(Y,M,D)
				if (this.ruleForm.timeType == 1) {
					//return "公历  " +  timers+" "+h+":"+m+":"+s;
					this.ruleForm.anotherDate = timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay + " " + (h < 10 ? '0' +
						h : h) + ":" + (m < 10 ? '0' + m : m);
				} else {
					var aaa = calendar.lunar2solar(Ys, Ms, D);
					///return "农历  " + timers+" "+h+":"+m+":"+s;
					this.ruleForm.anotherDate = aaa.cYear + '-' + aaa.cMonth + '-' + aaa.cDay + " " + (h < 10 ? '0' + h : h) + ":" + (
						m < 10 ? '0' + m : m);
					// return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
				}
			},
			// 获取国家的列表
			async getCountryList() {
				let res = await this.$ajax.get("/area/getCountry");
				if (res.data.code == 0) {
					this.countryList = res.data.data;
					this.ruleForm.countryId = res.data.data[0].id;
					// 获取省份
					this.getProvinceList();
				}
			},
			// 获取省份列表
			async getProvinceList() {
				this.$ajax.post('/area/getProvince?countryId=' + this.ruleForm.countryId)
					.then(res => {
						if (res.data.code == 0) {
							this.ruleForm.provinceId = res.data.data[0].id;
							this.provinceList = res.data.data;
							// 获取城市
							this.getCityList();
						}
					})
			},
			// 获取城市列表
			async getCityList(val) {
				this.$ajax.post('/area/getCity?provinceId=' + this.ruleForm.provinceId)
					.then(res => {
						if (res.data.code == 0) {
							this.ruleForm.cityId = res.data.data[0].id;
							this.cityList = res.data.data;
						}
			
					})
			},
			// 国家选择
			selectCountryChange(val) {
				this.ruleForm.countryId = val;
				// 如果选择的是非中国国家，隐藏省份和城市select
				if (val >= 2) {
					this.isForeign = true;
					return;
				} else {
					this.isForeign = false;
				}
				this.getProvinceList();
			},
			// 省份选择
			selectProvinceChange(val) {
				this.ruleForm.provinceId = val;
				this.getCityList();
			},
			// 城市选择
			selectCityChange(val) {
				this.ruleForm.cityId = val;
			},
			getLunarDate(date) { // 阳历转农历
			
				var lunar = {
					tg: '甲乙丙丁戊己庚辛壬癸',
					dz: '子丑寅卯辰巳午未申酉戌亥',
					number: '一二三四五六七八九十',
					year: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
					month: '正二三四五六七八九十冬腊',
					monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
					calendar: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9,
						0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B,
						0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5,
						0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25,
						0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957,
						0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5,
						0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57,
						0x52B, 0xA93, 0x40E95
					]
				}
			
				var year, month, day;
				if (!date) {
					date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
				} else {
					date = date.split('-'), year = parseInt(date[0]), month = date[1] - 1, day = parseInt(date[2]);
				}
			
				if (year < 1921 || year > 2020) {
					return {}
				}
			
				var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
				var isEnd = false;
				var tmp = year;
				if (tmp < 1900) {
					tmp += 1900;
				}
				total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + lunar.monthadd[month] + day - 38;
				if (year % 4 == 0 && month > 1) {
					total++;
				}
				for (m = 0;; m++) {
					k = (lunar.calendar[m] < 0xfff) ? 11 : 12;
					for (n = k; n >= 0; n--) {
						bit = (lunar.calendar[m] >> n) & 1;
						if (total <= 29 + bit) {
							isEnd = true;
							break;
						}
						total = total - 29 - bit;
					}
					if (isEnd) break;
				}
				lunarYear = 1921 + m;
				lunarMonth = k - n + 1;
				lunarDay = total;
				if (k == 12) {
					if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
						lunarMonth = 1 - lunarMonth;
					}
					if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
						lunarMonth--;
					}
				}
			
				return {
					lunarYear: lunarYear,
					lunarMonth: lunarMonth,
					lunarDay: lunarDay,
				};
			}
		}
	}
</script>

<style scoped>
	@media screen and (max-width:450px) {
		.b{
			display: flex;
			flex-direction: column!important;
			align-items: center!important;
			justify-content: center;
		}
	}
	.b{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
	}
	.sumbit-btn{
		width:122px;
		height:41px;
		background:linear-gradient(32deg,rgba(64,92,218,1),rgba(149,94,241,1));
		border-radius:7px;
		text-align: center;
		color: #FFF;
		cursor: pointer;
	}
	.caozuo p{
		width: 100%;
		text-align: center;
		margin: 24px 0;
		color: #656565;
		font-size: 14px;
	}
	.caozuo p span{
		margin: 0 10px;
		color: #405CDA;
		text-decoration: underline;
		cursor: pointer;
	}
	
	@media screen and (max-width:450px) {
		.a{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		.title1{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.tips{
			width: 100%;
			display: flex;
			margin-top: 10px;
		}
	}
	.title1{
		display: flex;
		align-items: center;
	}
	.tips{
		margin-left: 10px;
		font-size:12px;
		font-family:Adobe Heiti Std;
		font-weight:normal;
		color:rgba(64,92,218,1);
	}
	
	.head-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		line-height: 20px;
		transform: translateY(-20px);
	}
	
	.head-title h3 {
		font-size: 25px;
		font-family: BigruixianBlackGBV1.0;
		font-weight: bold;
		color: rgba(253, 253, 253, 1);
		line-height: 16px;
		text-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
	}
	
	.head-title span {
		display: inline-flex;
		background-color: #FFF;
		width: 15px;
		height: 3px;
		margin: 0 10px;
		box-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
	}
	
	.wrap {
		position: relative;
		background: url(../../assets/images/classicName/banner2.png) top no-repeat;
		font-size: 15px;
		background-color: rgb(241, 242, 249);
		padding-bottom: 1px;
	}

	.step {
		padding: 25px 0;
	}

	.step .active {
		color: #fff;
	}

	.step span {
		color: #ccc;
	}

	.box {
		background: #fff;
		padding: 30px;
		border-radius: 10px;
		margin-bottom: 30px;
	}

	.top-box .avatar-box {
		text-align: center;
		width: 90px;
		overflow: hidden;
		height: 90px;
	}

	.top-box .avatar-box img {
		width: 100%;
	}

	.top-box .item .left {
		color: rgb(131, 131, 131);
	}

	.top-box .item .right {
		color: rgb(61, 93, 234);
	}

	.top-box .item-box .item {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.top-box .item-box .item:first-child {
		margin-top: 0px;
	}

	.top-box .item-box .item .persent {
		height: 6px;
		width: 100px;
		display: inline-block;
		vertical-align: center;
		border-radius: 3px;
		margin-left: 10px;
		background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
	}

	.c-center-box .title,
	.c-bottom-box .title {
		color: #000;
		font-size: 18px;
		display: flex;
		font-weight: 600;
		align-items: center;
	}

	.c-center-box .title .circle,
	.c-bottom-box .title .circle {
		display: inline-block;
		border-radius: 50%;
		border: 4px solid rgb(250, 97, 102);
		width: 18px;
		margin-right: 10px;
		height: 18px;
	}

	.c-center-box .item {
		margin-top: 25px;
		line-height: 1.5;
	}

	.c-center-box .item .left {
		color: #000;
		font-weight: bold;
	}

	.c-center-box .item .right {
		color: rgb(46, 46, 46);
	}

	.c-bottom-box .item-box {
		text-align: center;
		margin-top: 20px;
	}

	@media screen and (max-width:450px) {
		.item-box .item {
			margin-top: 15px !important;
		}

		.page-box {
			margin-left: -18px;
			margin-right: -18px;
		}

		.box {
			padding-left: 10px;
			padding-right: 10px;
		}

		.c-bottom-box .item {
			width: 100% !important;
			padding: 0 10px !important;
		}

		.c-bottom-box .item .name {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			/* width: 60%!important; */
			font-size: 14px !important;
			color: rgb(61, 93, 234);
		}

		.c-bottom-box .item .name .xing {
			color: #000;
			display: inline-block;
			margin-right: 1px !important;
		}

		.c-bottom-box .item .name .score {
			background-color: #ff5f5f;
			display: inline-flex;
			width: auto !important;
			height: 15px !important;
			padding: 0 2px !important;
			align-items: center;
			justify-content: center;
			border-radius: 5px;
			color: #FFF;
			font-size: 12px !important;
		}

		.c-bottom-box .item .detail {
			display: inline-block;
			color: rgb(131, 131, 131);
			cursor: pointer;
			font-size: 14px;
			padding-left: 8px !important;
			border-left: 1px solid rgb(131, 131, 131);
			transition: all 0.3s;
		}
		.heart-icon-ren{
			left: 85%!important;
		}
	}

	.c-bottom-box .item {
		width: 234px;
		height: 72px;
		display: flex;
		margin: auto;
		align-items: center;
		padding: 0 30px;
		justify-content: space-between;
		background: url(../../assets/images/classicName/name_bg.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
	}

	.c-bottom-box .item .name {
		font-size: 17px;
		color: rgb(61, 93, 234);
	}

	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 6px;
	}

	.c-bottom-box .item .name .score {
		background-color: #ff5f5f;
		display: inline-flex;
		width: 50px;
		height: 20px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: #FFF;
		font-size: 16px;
	}

	.c-bottom-box .item .detail {
		display: inline-block;
		color: rgb(131, 131, 131);
		cursor: pointer;
		font-size: 14px;
		padding-left: 8px;
		border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
	}

	.c-bottom-box .item .detail:hover {
		color: rgb(61, 93, 234)
	}

	.page-box {
		text-align: center;
		margin-top: 50px;
	}
	.heart-icon-ren{
		position: absolute;
		width: 33px;
		height: 33px;
		background-size: 33px 33px;
		top: -6px;
		left: 207px;
		z-index: 9;
		background-position: 1px 0;
		background-repeat: no-repeat;
	}
	.no-heart-icon{
		background-image: url(../../assets/images/classicName/no_heart.png);
	}
	.heart-icon{
		background-image: url(../../assets/images/classicName/heart.png);
	}
</style>
